<!doctype html>
<html class="feedback">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="misapplication-tap-highlight" content="no"/>
	<meta name="HandheldFriendly" content="true"/>
	<meta name="MobileOptimized" content="320"/>
	<title>HTML5 Plus 拍照或者相册选择图片上传</title>
	<link rel="stylesheet" href="./css/face.css"/>
</head>
<body>
<header class="bar bar-nav">
	<h1 class="title">拍照或者相册选择图片上传</h1>
</header>
<img class="content">
	<div style="margin-top: 10px;"></div>
	<input type="hidden" id="ckjl.id" name="ckjl.id" value="429">
	<div class="collapse-content">
		<form>
			<label class="row-label"></label>
			<div id='F_CKJLBS' class="row image-list">
				<div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>
			</div>
		</form>
	</div>
	<button onclick="predict()">预测</button>
	<img id="view" width="200"/>
	<div id="result">
	<img id="resultImg" width="200"/>
	</div>
</div>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script>
$(document).ready(function() {
	$.ajax({
                url: HOST + '/api/jssdk/sign?url=' + location.href.split('#')[0] ,
                type: 'get',
                success: function(res) {
                    wx.config({
						debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: 'wx3d857b42797b5eb4', // 必填，公众号的唯一标识
						timestamp: res.content.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.content.nonceStr, // 必填，生成签名的随机串
						signature: res.content.signature,// 必填，签名，见附录1
						jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
                },
                error: function() {
                    alert('获取jssdk失败');
                }
            })

});

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
		// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
		// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

});

function predict(){
	var src = $("#view").attr('src')
	if (src == ""){
		alert("请选择图片");
	}
	//predict
	$.get(HOST + "/api/jssdk/download?" +  "&openid=" + SELFID, function (data) {
		$.get(HOST + "/api/face/predict?openid=" + SELFID,function (data) {
			$("#result").html("<span>" + data.content.name + "</span>")
			alert(data.content.imgUrl)
			$("#resultImg").attr("src", data.content.imgUrl);
		});
	});
}

function showActionSheet() {
	wx.chooseImage({
		count: 1, // 默认9
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		success: function (res) {
			var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
			alert(localIds)
			// upload
			wx.uploadImage({
				localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
					var serverId = res.serverId; // 返回图片的服务器端ID
					//下载图片
					$.get(HOST + "/api/jssdk/download?media_id=" + serverId  + "&openid=" + SELFID, function (data) {
						//预览
						$("#view").attr('src',  HOST + "/img/" + SELFID + ".jpg");

					});

				}
			});
		}
	});


}

</script>
</body>
</html>
